import { colorAddOpcity } from '@common/utils';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
const ModeMixin = {
    props: {
        mode: {
            type: String,
            default: getUiMode() || DEFAULT_MODE, // 模式，取值：浅色版（white）、深色版（black）
        },
        theme: {
            type: String,
            default: getUiTheme() || DEFAULT_THEME, // 主题，取值颜色
        },
        styleMode: {
            type: String,
            default: getUiStyleMode() || DEFAULT_STYLE_MODE, // 风格，取值：circle-圆角风格 square-直角风格，默认：circle
        },
    },
    computed: {
        fontColor() {
            const { theme } = this.$props;
            return `color: ${theme};`;
        },
        modeFontColor() {
            const { mode } = this.$props;
            return mode === 'white' ? '#333333' : '#EDEDED';
        },
        opcityBackground() {
            const { theme } = this.$props;
            return `background-color: ${colorAddOpcity(theme, 0.2)};color: ${theme};border: none;`;
        },
        opcityBg() {
            const { theme } = this.$props;
            return (num) => {
                return `background-color: ${colorAddOpcity(theme, num || 0.2)};`;
            };
        },
        themeBackround() {
            const { theme } = this.$props;
            return `background-color: ${theme};color: #FFFFFF;border: none;`;
        },
        borderColor() {
            const { theme } = this.$props;
            return `border-left: 3px solid ${theme};`;
        },
        disableStyle() {
            return 'opacity: 0.3';
        },
        standAndTasteSelectColor() {
            const { theme } = this.$props;
            return `background-color: ${colorAddOpcity(theme, 0.2)};color: ${theme};border-color: ${colorAddOpcity(theme, 0.3)};`;
        },
        buttonRound() {
            const { styleMode } = this.$props;
            return styleMode === 'circle';
        },
        borderThemeColor() {
            const { theme } = this.$props;
            return (num) => {
                return `border-color: ${colorAddOpcity(theme, num || 0.3)};`;
            };
        },
    },
};

export const PageMixin = {
    data() {
        return {
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        fontColor() {
            return `color: ${this.theme};`;
        },
        modeFontColor() {
            return this.mode === 'white' ? '#333333' : '#EDEDED';
        },
        opcityBackground() {
            return `background-color: ${colorAddOpcity(this.theme, 0.2)};color: ${this.theme};border: none;`;
        },
        opcityBg() {
            return (num) => {
                return `background-color: ${colorAddOpcity(this.theme, num || 0.2)};`;
            };
        },
        themeBackround() {
            return `background-color: ${this.theme};color: #FFFFFF;border: none;`;
        },
        borderColor() {
            return `border-left: 3px solid ${this.theme};`;
        },
        disableStyle() {
            return 'opacity: 0.3';
        },
        standAndTasteSelectColor() {
            return `background-color: ${colorAddOpcity(this.theme, 0.2)};color: ${this.theme};border-color: ${colorAddOpcity(this.theme, 0.3)};`;
        },
        buttonRound() {
            return this.styleMode === 'circle';
        },
        borderThemeColor() {
            return (num) => {
                return `border-color: ${colorAddOpcity(this.theme, num || 0.3)};`;
            };
        },
    },
};

export default ModeMixin;
